<!DOCTYPE html>
<html lang="en" class="no-js">
    <head>
        <meta charset="UTF-8" />
        <title>连接navicat</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="navicat_v1\login\css/demo.css" />
        <link rel="stylesheet" type="text/css" href="navicat_v1\login\css/style.css" />
		<link rel="stylesheet" type="text/css" href="navicat_v1\login\css/animate-custom.css" />
    </head>
    <body>
        <div class="container">
            <header>
                <h1><span>仿navicat项目</span></h1>
            </header>
            <section>				
                <div id="container_demo" >
                    <a class="hiddenanchor" id="toregister"></a>
                    <a class="hiddenanchor" id="tologin"></a>
                    <div id="wrapper">
                        <div id="login" class="animate form">
                            <form action="javascript:void(0);" autocomplete="on">
                                <h1>Log in</h1>
                                <!-- 连接名 -->
                                <p> 
                                    <label for="link_name" class="uname" data-icon="u" > Your Link name </label>
                                    <input id="linkname" name="linkname" type="text" placeholder="连接名" />
                                    <span class="hint_link" style="color: red;"></span>
                                </p>
                                <!-- ip地址 -->
                                <p> 
                                    <label for="address" class="address" data-icon="p" > Your IP Address </label>
                                    <input id="address" name="address" type="text" placeholder="IP地址" value="127.0.0.1" />
                                    <span class="hint_address" style="color: red;"></span>
                                </p>
                                <!-- 端口号 -->
                                <p> 
                                    <label for="port" class="port" data-icon="p" > Your Mysql Port </label>
                                    <input id="port" name="port" type="text" value="3306" placeholder="端口号" />
                                    <span class="hint_port" style="color: red;"></span>
                                </p>
                                <!-- mysql用户 -->
                                <p>
                                    <label for="mysql_uname" class="mysql_uname" data-icon="u" > Your Mysql username </label>
                                    <input id="mysql_uname" name="mysql_uname" type="text" placeholder="mysql用户名" value="root" />
                                    <span class="hint_mysql_uname" style="color: red;"></span>
                                </p>
                                <!-- mysql密码 -->
                                <p>
                                    <label for="mysql_pwd" class="mysql_pwd" data-icon="p"> Your Mysql password </label>
                                    <input id="mysql_pwd" name="mysql_pwd" type="password" placeholder="mysql密码" value="root" />
                                    <span class="hint_mysql_pwd" style="color: red;"></span>
                                </p>
                                <p class="keeplogin">
									<input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" />
									<label for="loginkeeping">Keep me logged in</label>
								</p>
                                <p class="login button">
                                    <input type="button" class="login_btn" value="Login" /> 
								</p>
                                <p class="change_link">
                                    如果长时间没有反应,请查看你的网络是否通畅?你的环境是否已经开启?你输入的信息是否真的正确?
                                    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                                    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                                </p>
                            </form>
                        </div>
                        </div>	
                    </div>
                </div>  
            </section>
        </div>
    </body>
</html>
<script type="text/javascript" src="navicat_v1\js\jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
    /**
     * 判断连接名、端口号、ip地址、mysql用户名、密码是否非空
     */
     //连接名
    $("#linkname").blur(function(){
        var linkname = $.trim($("#linkname").val());
        if(linkname === ''){
            $(".hint_link").html('连接名不能为空!');
        }else{
            $(".hint_link").html('');
        }
    });
    //IP地址
    $("#address").blur(function(){
        // alert(linkname);
        var address = $.trim($(this).val());
        if(address === ''){
            $(".hint_address").html('IP地址不能为空!');
        }else{
            $(".hint_address").html('');
        }
    });
    //端口号
    $("#port").blur(function(){
        var port = $.trim($(this).val());
        if(port === ''){
            $(".hint_port").html('端口号不能为空!');
        }else{
            $(".hint_port").html('');
        }
    });
    //mysql用户名
    $("#mysql_uname").blur(function(){
        var mysql_uname = $.trim($(this).val());
        if(mysql_uname === ''){
            $(".hint_mysql_uname").html('mysql用户名不能为空!');
        }else{
            $(".hint_mysql_uname").html('');
        }
    });

    //ajax后端进行验证
    $(".login_btn").click(function(){
        var linkname = $.trim($("#linkname").val());       //连接名
        var address = $.trim($("#address").val());         //IP地址
        var port = $.trim($("#port").val());               //端口号
        var mysql_uname = $.trim($("#mysql_uname").val()); //mysql用户名
        var mysql_pwd = $.trim($("#mysql_pwd").val());     //Mysql密码
        $.ajax({
            type: "post",
            url: "?r=login/db_file",
            data: {'linkname':linkname, 'address':address, 'port':port, 'mysql_uname':mysql_uname, 'mysql_pwd':mysql_pwd},
            dataType: "json",
            success:function(msg){
                // 后端判断非空
                if(msg === '0_linkname'){
                    $(".hint_link").html('连接名不能为空!');
                }
                if(msg === '0_address'){
                    $(".hint_address").html('IP地址不能为空!');
                }
                if(msg === '0_port'){
                    $(".hint_port").html('端口号不能为空!');
                }
                if(msg === '0_mysql_uname'){
                    $(".hint_mysql_uname").html('mysql用户名不能为空!');
                }
                if(msg === '00'){
                    alert('该链接已经存在');
                    return false;
                }
                //执行成功
                if(msg === '1'){
                    location.href='?r=index/index';
                }
            }
        });
    });
})
</script>